<template>
  <el-row style="height:100%">
    <page @buttons="configPermissions">
      <pageheader :event="'basePopUp'" :isShow="buttonPermissions.isAdd">
        数据库管理
      </pageheader>
      <div class="page-content">
        <el-card class="box-card">
          <el-button type="primary" size="small" @click="upData" style="margin: 5px 0 20px">刷新数据库</el-button>
          <el-tabs v-model="activeName" type="border-card">
            <el-tab-pane v-for="(item,index) in data" :label="item.table_code" :key="index" :name="item.table_code">
              <TreeTable
                :tableData="item.data_table_list"
                :columns="columns"
                border
              ></TreeTable>
            </el-tab-pane>
          </el-tabs>
        </el-card>
        <!--新增模态框-->
        <el-dialog v-dialogDrag title="创建数据存储表组" :visible.sync="isShow" @close="closeDialog" width="900px">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px">
            <el-form-item label="输入code" prop="code">
              <el-input v-model="ruleForm.code" size="small" style="width:450px"></el-input>
            </el-form-item>
            <el-form-item label="选择年份" prop="year">
              <el-date-picker v-model="ruleForm.year" type="year" placeholder="选择年" size="small" value-format="yyyy"
                              format="yyyy" style="width:450px">
            </el-date-picker>
            </el-form-item>
            <el-form-item label="is_counting" class="switchdiv one" prop="is_counting">
              <el-switch
                v-model="ruleForm.is_counting"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value=1
                inactive-value=0
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="is_service" class="switchdiv "  prop="is_service">
              <el-switch
                v-model="ruleForm.is_service"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value=1
                inactive-value=0
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="is_queue" class="switchdiv" prop="is_queue">
              <el-switch
                v-model="ruleForm.is_queue"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value=1
                inactive-value=0
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="is_sale" class="switchdiv" prop="is_sale">
              <el-switch
                v-model="ruleForm.is_sale"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value=1
                inactive-value=0
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="is_facedata" class="switchdiv" prop="is_facedata">
              <el-switch
                v-model="ruleForm.is_facedata"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value=1
                inactive-value=0
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="is_staytime" class="switchdiv one" prop="is_staytime">
              <el-switch
                v-model="ruleForm.is_staytime"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value=1
                inactive-value=0
              >
              </el-switch>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="isShow = false" size="small">取 消</el-button>
            <el-button type="primary" @click="confirmDialog" size="small"
                       :disabled="btnDisabled" >保 存</el-button>
          </div>
        </el-dialog>
      </div>
    </page>
  </el-row>
</template>

<script>
  import page from "@/components/page/page";
  import pageheader from "@/components/page/pageheader";
  import TreeTable from "@/components/sys/assembly/treeTable";
  import Moment from "moment";
  export default {
    data() {
      return {
        data:[],
        columns:[
          {
            text: "table_name",
            value: "table_name",
            align: "left",
            // width:
          },
          {
            text: "data_length",
            value: "data_length",
            align: "center",
            // width:
          },
          {
            text: "table_rows",
            value: "table_rows",
            align: "center",
            // width:
          },
          {
            text:"table_collation",
            value:"table_collation",
            align:"center"
          }, {
            text: "create_time",
            value: "create_time",
            align: "center",
            // width:
          },
          {
            text:"update_time",
            value:"update_time",
            align:"center"
          },
        ],
        activeName:'',
        ruleForm:{
          code:'',
          year:'',
          is_counting:'1',
          is_queue:'0',
          is_service:'0',
          is_sale:'0',
          is_facedata:'0',
          is_staytime:'0',
        },
        rules: {
          code: [{ required: true, message: "请输入code",trigger:'blur'}],
          year: [{ required: true, message: "请选择年份",trigger:'change'}],
        },
        isShow:false,//是否开启模态框
        buttonPermissions:{
          isAdd:false,
          isDel:false,
          isModify:false,
          isWatch:false,
        },
        btnDisabled:false
      }
    },
    inject: ["reload"],
    components: {
      page,
      pageheader,
      TreeTable,
    },
    watch:{
      ruleForm:{
        handler(newV) {
          this.btnDisabled = (newV.is_counting == 0 && newV.is_queue == 0 && newV.is_service == 0 && newV.is_sale == 0 && newV.is_facedata == 0) ? true : false;
          console.log(this.btnDisabled);
        },
        deep: true
      }
    },
    created(){
      this.getDataTable()
      //判断是否有按钮权限
      if (sessionStorage.buttonPermissions) {
        this.configPermissions(JSON.parse(sessionStorage.buttonPermissions))
      }
    },
    mounted(){
      this.$Bus.$on('basePopUp',() => {
        this.isShow = true;
      })
    },
    beforeDestroy(){
      this.$Bus.$off('basePopUp')
    },
    methods:{
      //配置按钮权限，根据权限不同调整表头渲染参数
      configPermissions(val){
        let buttonPermissions = val
        let menuButtonPermissions = [];//按钮权限数组
        buttonPermissions.forEach(e =>{
          for(let key in e){
            if(key == 'menu_code'){
              menuButtonPermissions.push(e[key])
            }
          }
        });
        this.buttonPermissions.isAdd = menuButtonPermissions.includes('userAdd') ? true : false; //是否有新增权限
      },
      //获取数据库列表
      getDataTable(){
        let url ='/sys/db/all_table_stored'
        this.$api.get(url)
        .then(data=>{
          // console.log(data);
          if(data == '10001'){
            this.$message.error('无权操作该数据')
            return
          }
          if(data){
            data.data.map(x=>{
              x.data_table_list.map(y=>{
                y.update_time = Moment(y.update_time).format("YYYY-MM-DD HH:mm")
                y.create_time = Moment(y.create_time).format("YYYY-MM-DD HH:mm")
              })
            })
            this.data = data.data
            if(this.data[0].table_code){
              this.activeName = this.data[0].table_code
            }
          }
          this.$Bus.$emit('Loading', false)
        })
        .catch(err=>{
           console.log(err);
          this.$Bus.$emit('Loading', false)
        })
      },
      //新增保存
      confirmDialog(){
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            // this.$Bus.$emit('Loading',true)
            let model = this.$refs.ruleForm.model;
            let data ={};
            data.code=model.code;
            data.is_counting = Number(model.is_counting);
            data.is_queue = Number(model.is_queue);
            data.is_service = Number(model.is_service);
            data.is_sale = Number(model.is_sale);
            data.is_facedata = Number(model.is_facedata);
            data.is_staytime = Number(model.is_staytime);
            data.year = Number(model.year);
            let url = '/sys/db/create_table_stored?code=' + data.code + '&year=' + data.year + '&is_counting=' + data.is_counting +
              '&is_queue=' + data.is_queue + '&is_service=' + data.is_service + '&is_sale=' + data.is_sale +
              '&is_facedata=' + data.is_facedata + '&is_staytime='+ data.is_staytime;
            this.$api.post(url)
            .then(data=>{
              if(data == '10001'){
                this.$message.error('无权操作该数据')
                this.$Bus.$emit('Loading',false);
                return
              }
              if(data.msg == 'success'){
                this.$message({
                  message: "新增成功",
                  type: "success"
                });
                
                this.reload();
              }
            })
            .catch(err=>{
               console.log(err);
            })
          } else {
            console.log("error submit!!");
            this.$Bus.$emit('Loading',false)
            return false;
          }
        });
      },
      //关闭模态框
      closeDialog(){
        this.$refs.ruleForm.resetFields();
        this.$Bus.$emit('Loading',false)
      },
      upData(){
        this.$Bus.$emit('Loading',true)
        let url = '/sys/db/refresh_table_stored_cache'
        this.$api.get(url)
        .then(data=>{
          // console.log(data);
          if(data){
            this.$message({
              message: "刷新成功",
              type: "success"
            });
          }
          this.$Bus.$emit('Loading',false)
        })
        .catch(err=>{
           console.log(err);
        })
      }
    }
  }
</script>

<style lang="scss">
.el-form-item.switchdiv{
  display: inline-block;
  &.one{
    .el-form-item__label{
      width:180px!important;
    }
    .el-form-item__content{
      margin-left: 180px!important;
    }
  }
  .el-form-item__label{
    width:110px!important;
  }
  .el-form-item__content{
    margin-left: 110px!important;
  }
  
}
</style>